<template>
	<view class="content">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
		<!-- <view class="left" @click="handleExport()"><text class="iconfont icon-xiazai"></text>导出</view> -->
		<view class="section-0">
			<view class="section-body">
				<view class="form">
					<view class="form-item">
						<view class="label">搜索</view>
						<view class="shape"></view>
						<view class="input">
							<u--input placeholderClass="input-placeholder" class="input-body" placeholder=""
							 v-model="form.ticket_name"></u--input>
						</view>
					</view>
					<view class="actions">
						<view class="action" @click="handleResetForm()">
							<text>重</text>
							<text>置</text>
						</view>
						<view class="action search" @click="handleSearch()">
							<text>查</text>
							<text>询</text>
						</view>
					</view>
				</view>
				<view class="list">
					<view :class="`item ${expandList.indexOf(item.id) !== -1 ? 'item__expand' : ''}`"
						v-for="(item, index) in list" :key="item.id + '_' + index">
						<view class="parent">
							<view class="name">
								<text style="max-width: 480rpx;">{{index + 1}}.{{item.ticket_name}}</text>
								<text v-show="item.construction_name != null">区域：{{item.construction_name}}</text>
							</view>
							<!-- <view class="name">{{item.project_name}}</view> -->
							<view class="time">
								<text v-show="item.begin_time != null">开始时间：{{item.begin_time ? item.begin_time.substring(0, 10) : ''}}</text>
								<text v-show="item.end_time != null">计划结束时间：{{item.end_time ? item.end_time.substring(0, 10) : ''}}</text>
							</view>
							<view class="people">
								<text>作业部位：{{item.ticket_position}}</text>
								<text>风险等级：{{item.danger_level}}</text>
								<!-- <text>技术员：{{item.dk_address}}</text> -->
								<!-- <text>施工人数：{{item.ticket_quantity}}人</text> -->
							</view>
							<view class="other">
								<!-- <view hover-class="1" hover-start-time="500" hover-stay-time="2000">作业票详情</view>
								<view hover-class="1" hover-start-time="500" hover-stay-time="2000">施工方案</view>
								<view hover-class="1" hover-start-time="500" hover-stay-time="2000">站班会视频</view> -->
								<view v-show="item.file_path != null" class="other1" @click="preview(item.file_path)">作业票详情</view>
								<view class="other1" @click="goVideo(item)">站班会</view>
								<!-- <view class="other1" @click="palyVideo(item.video_url)">站班会</view> -->
								<!-- <view class="other1">站班会</view> -->
								<view v-show="item.technical_plan_file_path != null" class="other1" @click="preview(item.technical_plan_file_path)">施工方案</view>
								<!-- <view class="other1">站班会视频</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import { ticketListApi } from '@/api/statistics.js';
	export default {
		data() {
			return {
				form: {
					ticket_name: ''
				},
				list: [],
				expandList: [],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				project_id: 0,
			}
		},
		onLoad(data) {
			if (data.project_id) {
				this.project_id = data.project_id
			}
		},
		methods: {
			handleExport() {
				let name = '履职记录'
				let arr = [
					[{
						content: '姓名',
						type: 'text',
						width: '200px',
						height: '25px',
						fontSize: '16px'
					}, {
						content: '项目',
						type: 'text',
						width: '200px',
						height: '25px',
						fontSize: '16px'
					}, {
						content: '打卡次数',
						color: 'blue',
						type: 'text',
						width: '200px',
						height: '25px',
						fontSize: '16px'
					}],
				];
				this.list.forEach(item => {
					let _arr = [{
						content: item.user_name,
						type: 'text',
						width: '200px',
						height: '25px',
						fontSize: '16px'
					},{
						content: item.project_name,
						type: 'text',
						width: '200px',
						height: '25px',
						fontSize: '16px'
					},{
						content: item.total,
						type: 'text',
						width: '200px',
						height: '25px',
						color: 'blue',
						fontSize: '16px'
					}]
					arr.push(_arr);
				})
				doExport(name, arr, (res) => {
				})
			},
			goVideo(item) {
				uni.navigateTo({
					url: `/pages/statistics/safety/ticket/video/index?project_id=${item.project_id}&ticket_id=${item.ticket_id}`
				})	
			},
			preview(url) {
				uni.navigateTo({
					url: '/pages/pdf/index?url=' + url
				})
			},
			go(item) {
				let params = { id: item.id, project_name: item.project_name };
				uni.navigateTo({
					url: '/pages/statistics/safety/problem/info/index?params=' + JSON.stringify(params)
				})
			},
			handleResetForm(){
				for (let key in this.form) {
					this.form[key] = '';
				}
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0,0);
			},
			handleSearch(){
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0,0);
			},
			expandChange(id) {
				const idx = this.expandList.indexOf(id);
				if (idx !== -1) {
					this.expandList.splice(idx, 1);
				} else {
					this.expandList.push(id);
				}
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				const {data} =  await ticketListApi({
					...this.form,
					project_id: this.project_id,
					page: page.num,
					pageSize: this.pageSize
				});
				if (data.code === 1 || data.code === 200) {
					const list = data.data;
					
					// 接口返回的当前页数据列表 (数组)
					let curPageData = list; 
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					// let totalPage = data.data.list.last_page; 
					let totalPage = 1; 
					//设置列表数据
					if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage); 
					setTimeout(()=>{
						// this.mescroll.endSuccess(curPageLen);
						this.mescroll.endSuccess(1);
					},20);
				} else{
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	// .content{
	// 	background-color: #3a5df5;
	// }
	// .left {
	// 	float: left;
	// 	font-size: 26rpx;
	// 	color: #0535d6;
	// 	// width: 49rpx;
	// 	// height: 24rpx;
	// 	font-family: SourceHanSansCN-Medium;
	// 	font-size: 26rpx;
	// 	font-weight: normal;
	// 	font-stretch: normal;
	// 	line-height: 34rpx;
	// 	letter-spacing: 0rpx;
	// 	// color: #fafbfd;
	// 	.iconfont {
	// 		font-size: 26rpx;
	// 		margin-right: 10rpx;
	// 	}
	
	// 	&:last-child {
	// 		float: right;
	// 	}
	// }
	.section-0{
		z-index: 10;
		background-color: #3a5df5;
		// border-top-left-radius: 50rpx;
		// border-top-right-radius: 50rpx;
		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
			.tab{
					width: 100%;
					height: 80rpx;
					@include clear();
					background-color: #1534ce;
					.item{
						width: 33.33%;
						float: left;
						height: 80rpx;
						background-color: #1534ce;
						position: relative;
						.label{
							height: 80rpx;
							line-height: 80rpx;
							position: relative;
							z-index: 10;
							box-sizing: border-box;
							text-align: center;
							width: 100%;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #ffffff;
						}
						.shape{
							z-index: 1;
							width: 50rpx;
							height: 50rpx;
							position: absolute;
							bottom: 0;
							left: -50rpx;
							background: #000;
							display: none;
							background-color: #fff;
							overflow: hidden;
							.shape-body{
								width: 50rpx;
								height: 50rpx;
								background-color: #1534ce;
								border-bottom-right-radius: 40rpx;
							}
						}
						.shape-mirrow{
							z-index: 1;
							left: 0;
							display: none;
							.shape-body{
								border-bottom-right-radius: 0rpx;
								border-bottom-left-radius: 40rpx;
							}
						}
					}
					.item__active{
						border-top-left-radius: 40rpx;
						border-top-right-radius: 40rpx;
						background-color: #fff;
						.label{
							color: #46464a;
						}
						.shape{
							display: block;
						}
						.shape-mirrow{
							display: none;
						}
					}
					.item__active_next{
						border-bottom-right-radius: 50rpx;
						.shape{
							display: none;
						}
						.shape-mirrow{
							display: block;
						}
					}
			}
		}
		.list {
				width: 670rpx;
				box-sizing: border-box;
				margin-left: 40rpx;
				border-top: 2rpx solid #d8e4f2;
				
				.item {
					width: 670rpx;
					padding: 10rpx 0;
					border-bottom: solid 2rpx #f2f2f0;
					.parent {
						width: 672rpx;
						@include clear();
						.name {
							// 将两个view元素分左右对齐
							display: flex;
							justify-content: space-between;
							width: 100%;
							line-height: 30rpx;
							padding: 26rpx 0;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 2rpx;
							color: #3b3c40;
							float: left;
							word-break: break-all;
						}
						.time{
							display: flex;
							justify-content: space-between;
							width: 100%;
							float: left;
							font-size: 19rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #7f98ae;
							margin-bottom: 12rpx;
						}
						.people{
							width: 100%;
							float: left;
							display: inline-flex; //将对象作为内联块级弹性伸缩盒显示 父元素默认根据子元素宽高自适应
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							font-family: AdobeHeitiStd-Regular;
							font-size: 20rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 34rpx;
							letter-spacing: 0rpx;
							color: #3b3c40;
						}
						.other{
							width: 100%;
							float: left;
							display: inline-flex; //将对象作为内联块级弹性伸缩盒显示 父元素默认根据子元素宽高自适应
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							// flex-wrap: nowrap; //项目不换行排列
							.other1{
								// align-self: center;
								font-family: AdobeHeitiStd-Regular;
								font-size: 28rpx;
								font-weight: normal;
								font-stretch: normal;
								line-height: 64rpx;
								letter-spacing: 0rpx;
								color: #1534ce;
							
							}
						}

						.action {
							float: right;
							width: 32rpx;
							margin-right: 48rpx;
							height: 100%;
							line-height: 82rpx;
							text-align: center;
							color: #3b3c40;

							.iconfont {
								font-size: 32rpx;
								transition: 0.2s ease;
								transform: rotate(90deg);
							}

						}
					}

					
				}

				.item__expand {
					.parent {
						.action {
							.iconfont {
								transform: rotate(-90deg);
							}
						}
					}

					.child {
						box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.03) inset;
					}
				}
			}
		.actions{
			width: 100%;
			height: 50rpx;
			margin-top: 29rpx;
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			.action{
				width: 288rpx;
				height: 48rpx;
				background-color: #395cf5;
				border-radius: 20rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				color: #ffffff;
				text{
					&:first-child{
						margin-right: 20rpx;
					}
				}
			}
			.search{
				background-color: #1534ce;
			}
		}
		.form{
			width: 100%;
			padding: 0 75rpx;
			padding-top: 40rpx;
			box-sizing: border-box;
			
			.form-time{
				width: 600rpx;
				min-height: 48rpx;
				margin: 0 auto;
				margin-bottom: 9rpx;
				
				@include clear;
				.label{
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}
				.wrapper{
					float: left;
					width: calc(100% - 134rpx);
					line-height: 48rpx;
					.item{
						float: left;
						display: inline-block;
						height: 48rpx;
						border-radius: 35rpx;
						padding: 0 20rpx;
						background-color: #395cf5;
						text-align: center;
						font-size: 26rpx;
						line-height: 48rpx;
						color: #fff;
						margin-left: 10rpx;
						transition: 0.3s ease;
						margin-bottom: 16rpx;
					}
					.item__active{
						background-color: #1534ce;
					}
				}
			}
			.form-item{
				width: 600rpx;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				margin-bottom: 25rpx;
				&:last-child{
					margin-bottom: 34rpx;
				}
				@include clear();
				.label{
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}
				.shape{
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}
				.input{
					float: left;
					width: calc(100% - 134rpx - 3rpx);
					.input-body{
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0!important;
						border: none;
						padding-left: 30rpx!important;
						padding-right: 30rpx!important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0,0,0,0.7);
					}
					.input-placeholder{
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0,0,0,0.5);
					}
				}	
			}
		}
	}
</style>
